<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" th:href="@{/img/icon.png}"/>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
	<link rel="stylesheet" th:href="@{/css/global.css}" />
	<link rel="stylesheet" th:href="@{/css/discuss-detail.css}" />
	<title>博客详情</title>
</head>
<body>
	<div class="nk-container">
		<!-- 头部 -->
		<header class="bg-dark sticky-top" th:replace="index::header">

		</header>

		<!-- 内容 -->
		<div class="main">
			<!-- 博客详情 -->
			<div class="container">
				<!-- 标题 -->
				<h6 class="mb-4">
					<img src="http://static.nowcoder.com/images/img/icons/ico-discuss.png"/>
					<!--使用utext标题如果是标签将正常显示，&lt;会显示为小于号-->
					<span th:utext="${post.title}" style="font-weight:bold">备战春招，面试刷题跟他复习，一个月全搞定！</span>&nbsp;&nbsp;
					<span class="badge badge-secondary bg-info" th:utext="${post.kindName}"></span>
					<div class="float-right">
						<input type="hidden" id="postId" th:value="${post.id}">
						<button type="button" th:class="|btn ${post.type==1?'btn-secondary':'btn-danger'} btn-sm|" id="topBtn"
								th:text="${post.type==1?'已置顶':'置顶'}" sec:authorize="hasAnyAuthority('admin')">置顶</button>
						<button type="button" th:class="|btn ${post.status==1?'btn-secondary':'btn-danger'} btn-sm|" id="wonderfulBtn"
								th:text="${post.status==1?'已加精':'加精'}" sec:authorize="hasAnyAuthority('admin')">加精</button>
						<button type="button" class="btn btn-danger btn-sm" sec:authorize="hasAnyAuthority('admin')" id="deleteBtn">删除</button>
						<!--使用bootstrap弹窗，可以自定义标题和内容
						<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#deleteModal"
								sec:authorize="hasAnyAuthority('admin')" id="deleteBtn">删除</button>
						<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h6 class="modal-title" id="deleteModalLabel">提示</h6>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
									</div>
									<div class="modal-body">
										<h6>您确认要删除这篇博客吗？</h6>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
										<button type="button" class="btn btn-primary" id="deleteBtn">确认</button>
									</div>
								</div>
							</div>
						</div>-->
					</div>
				</h6>
				<!-- 作者 -->
				<div class="media pb-3 border-bottom">
					<a th:href="@{|/user/profile/${user.id}|}" th:if="${loginUser!=null}">
						<img th:src="${user.headerUrl}" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
					</a>
					<img th:src="${user.headerUrl}" th:if="${loginUser==null}" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
					<div class="media-body">
						<div class="mt-0 text-warning" >
							<span th:utext="${user.name}"></span>&nbsp;&nbsp;
							<span class="badge badge-secondary bg-success" th:if="${post.category==0}">学生帖</span>
							<span class="badge badge-secondary bg-muted" th:if="${post.category==1}">老师帖</span>
						</div>
						<div class="mt-3">
							<b style="color:#69757d">发布于</b> <b style="color:#69757d" th:text="${#dates.format(post.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b>
							<div class="d-inline float-right">
								<a href="#" class="text-primary float-left" th:if="${loginUser!=null && loginUser.id==post.userId}" id="delBtn">删除</a>&nbsp;&nbsp;&nbsp;&nbsp;
								<a href="#" th:onclick="|like(this,1,${post.id},${post.userId},${post.id});|" class="text-primary">
									<b th:text="${likeStatus==1?'已赞':'赞'}"></b> <i th:text="${likeCount}">11</i>
								</a>&nbsp;&nbsp;&nbsp;
								<a href="#replyform" class="text-primary">回复 <i th:text="${post.commentCount}">7</i></a>
							</div>
						</div>
					</div>
				</div>	
				<!-- 正文 -->
				<div class="mt-4 mb-3 content" th:utext="${post.content}">
					金三银四的金三已经到了，你还沉浸在过年的喜悦中吗？
				</div>
			</div>
			<!-- 回复 -->
			<div class="container mt-3">
				<!-- 回复数量 -->
				<!--i标签之前已经去掉样式，因此就是普通的文字-->
				<div class="row">
					<div class="col-8">
						<h6><b class="square"></b> <i th:text="${post.commentCount}">30</i>条回复</h6>
					</div>
					<div class="col-4 text-right">
						<a href="#replyform" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</a>
					</div>
				</div>
				<!-- 回复列表 -->
				<ul class="list-unstyled mt-4">
					<li class="media pb-3 pt-3 mb-3 border-bottom" th:each="cvo:${comments}" th:id="|huifu1-${page.offset + cvoStat.count}|">
						<a th:href="@{|/user/profile/${cvo.user.id}|}">
							<img th:src="${cvo.user.headerUrl}" class="align-self-start mr-4 rounded-circle user-header" alt="用户头像" >
						</a>
						<div class="media-body">
							<div class="mt-0">
								<span class="font-size-12 text-success" th:utext="${cvo.user.name}">范明</span>
								<span class="badge badge-secondary float-right floor">
									<i th:text="${page.offset + cvoStat.count}">1</i>#
								</span>
							</div>
							<div class="mt-2" th:utext="${cvo.comment.content}">
								这开课时间是不是有点晚啊。。。
							</div>
							<div class="mt-4 text-muted font-size-12">
								<span>发布于 <b th:text="${#dates.format(cvo.comment.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b></span>
								<div class="d-inline float-right">
									<a href="#javascript:;" class="text-primary float-left" sec:authorize="hasAnyAuthority('admin')" th:onclick="|delComment(${cvo.comment.id},${post.id});|">删除</a>
									<a href="javascript:;" class="text-primary float-left" th:if="${loginUser!=null && loginUser.id==cvo.comment.userId}" sec:authorize="hasAnyAuthority('user')" th:onclick="|delComment(${cvo.comment.id},${post.id});|">删除</a>
									&nbsp;&nbsp;&nbsp;
									<a href="javascript:;" th:onclick="|like(this,2,${cvo.comment.id},${cvo.comment.userId},${post.id});|" class="text-primary">
										<b th:text="${cvo.likeStatus==1?'已赞':'赞'}"></b>(<i th:text="${cvo.likeCount}">1</i>)
									</a>&nbsp;&nbsp;
									<a th:href="|#huifu1-${page.offset + cvoStat.count}|" class="text-primary">回复(<i th:text="${cvo.replyCount}">2</i>)</a>
								</div>
							</div>
							<!-- 回复列表 -->
							<ul class="list-unstyled mt-4 bg-gray p-3 font-size-12 text-muted">
								<li class="pb-3 pt-3 mb-3 border-bottom" th:each="rvo:${cvo.replys}">
									<div>
										<span th:if="${rvo.target==null}">
											<b class="text-info" th:text="${rvo.user.name}">寒江雪</b>:&nbsp;&nbsp;
										</span>
										<span th:if="${rvo.target!=null}">
											<i class="text-info" th:text="${rvo.user.name}">Sissi</i> 回复
											<b class="text-info" th:text="${rvo.target.name}">寒江雪</b>:&nbsp;&nbsp;
										</span>
										<span th:utext="${rvo.reply.content}">这个是直播时间哈，觉得晚的话可以直接看之前的完整录播的~</span>
									</div>
									<div class="mt-3">
										<span th:text="${#dates.format(rvo.reply.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</span>
										<div class="d-inline float-right">
											<a href="javascript:;" class="text-primary float-left" sec:authorize="hasAnyAuthority('admin')" th:onclick="|delReply(${rvo.reply.id},${post.id});|">删除</a>
											<a href="javascript:;" class="text-primary float-left" th:if="${loginUser!=null && loginUser.id==rvo.reply.userId}" sec:authorize="hasAnyAuthority('user')" th:onclick="|delReply(${rvo.reply.id},${post.id});|">删除</a>
											&nbsp;&nbsp;&nbsp;
											<a href="javascript:;" th:onclick="|like(this,2,${rvo.reply.id},${rvo.reply.userId},${post.id});|" class="text-primary">
												<b th:text="${rvo.likeStatus==1?'已赞':'赞'}">赞</b>(<i th:text="${rvo.likeCount}">1</i>)
											</a>&nbsp;&nbsp;
											<a th:href="|#huifu-${rvoStat.count}|" data-toggle="collapse" class="text-primary">回复</a>
										</div>
										<div th:id="|huifu-${rvoStat.count}|" class="mt-4 collapse">
											<form method="post" th:action="@{|/comment/add/${post.id}|}">
												<div>
													<input type="text" class="input-size" name="content" th:placeholder="|回复${rvo.user.name}|" onkeydown='if(event.keyCode==13) return false;' required/>
													<input type="hidden" name="entityType" value="2">
													<input type="hidden" name="entityId" th:value="${cvo.comment.id}">
													<input type="hidden" name="targetId" th:value="${rvo.user.id}">
												</div>
												<div class="text-right mt-2">
													<button type="submit" class="btn btn-primary btn-sm" onclick="#">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
												</div>
											</form>
										</div>
									</div>								
								</li>
								<!-- 回复输入框 -->
								<li class="pb-3 pt-3">
									<form method="post" th:action="@{|/comment/add/${post.id}|}">
										<div>
											<input type="text" class="input-size" name="content" placeholder="请输入你的观点" onkeydown='if(event.keyCode==13) return false;' required/>
											<input type="hidden" name="entityType" value="2">
											<input type="hidden" name="entityId" th:value="${cvo.comment.id}">
										</div>
										<div class="text-right mt-2">
											<button type="submit" class="btn btn-primary btn-sm" onclick="#">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
										</div>
									</form>
								</li>
							</ul>
						</div>
					</li>
				</ul>
				<!-- 分页 -->
				<nav class="mt-5" th:replace="index::pagination">

				</nav>			
			</div>
			<!-- 回复输入框 -->
			<div class="container mt-3">
				<form class="replyform" method="post" th:action="@{|/comment/add/${post.id}|}">
					<p class="mt-3">
						<a name="replyform"></a>
						<textarea placeholder="在这里畅所欲言你的看法吧!" name="content" required></textarea>
						<input type="hidden" name="entityType" value="1">
						<input type="hidden" name="entityId" th:value="${post.id}">
					</p>
					<p class="text-right">
						<button type="submit" class="btn btn-primary btn-sm">&nbsp;&nbsp;回&nbsp;&nbsp;复&nbsp;&nbsp;</button>
					</p>
				</form>
			</div>
		</div>

		<!-- 尾部 -->
		<footer class="bg-dark" th:replace="index::footer">

		</footer>
	</div>
	<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
	<script th:src="@{/js/global.js}"></script>
	<script th:src="@{/js/discuss.js}"></script>
</body>
</html>
